<template>
	<om-page :title="pageTitle">
		<view class="flex justify-end padding">
			<om-showswitch></om-showswitch>
		</view>
		<view class="page__bd">
			<om-wing-blank size="default">
				<uni-list>
					<view v-for="(item, index) in datas" :key="index">
						<view v-if="item.h5Path">
							<uni-list-item v-show="hasItemVal(item)" class="padding-0" @click="onTab(item)">
								<view class="tui-flex align-center">
									<view class="tui-col-5">
										<om-label :label="item.name"></om-label>
									</view>
									<view class="tui-col-7">{{item.value}}</view>
								</view>
							</uni-list-item>
						</view>
						<view v-else>
							<uni-list-item v-show="hasItemVal(item)"  class="padding-0" :showArrow="hasFormula(item)" :showHover="hasFormula(item)" @click="lookFormula(item)">
								<view class="tui-flex align-center">
									<view class="tui-col-5">
										<om-label :align="'right'" :label="item.name"></om-label>
									</view>
									<view v-if="item.ispic" class="tui-col-7">
										<view v-if="item.value" class="tui-left" @tap="imageView(item.value)">
											<image :src="item.value"  @load="changeImage" id="showSign" mode="widthFix" :style="{ height:imgHeight+'px',width:imgWidth+'px',border:'2px solid #ddd','margin-left':0}" ></image>
										</view>
									</view>
									<view v-else class="tui-col-7">{{item.value?item.value:''}}</view>
								</view>
							</uni-list-item>
						</view>
					</view>
					<view v-if="isShow || hasConfirmed">
						<uni-list-item :showArrow="false">
							<view class="tui-flex align-center" >
								<view class="tui-col-5">
									<om-label :align="'right'" label="手写签名" :required="true"></om-label>
								</view>
								<view v-if="!isSign" class="tui-col-7" @click="toSignature">点击此处签名</view>
								<view v-else class="tui-col-7"  @tap.stop="isComfir?imageView(image):toSignature()">
									<image :src="image" id="signImage"  mode="widthFix" :style="{ height:imgHeight+'px',width:imgWidth+'px',border:'2px solid #ddd'}"></image>
								</view>
							</view>
						</uni-list-item>
					</view>
				</uni-list>
				<view v-if="tips && isShow" style="margin-left:40rpx;">
					*温馨提示：如对薪资核算信息有异议时，请联系{{tips}}
				</view>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-white-space></om-white-space>
				<om-button v-if="isShow" :buttons="confirmBtn" @btnChange="btnClick"></om-button>
				<om-white-space></om-white-space>
			</om-wing-blank>
		</view>
		<om-button :buttons="buttons" @btnChange="btnChange" fontSize="medium"></om-button>
		<om-hover-button openType="switchTab" title="返回首页" url="/pages/main/main/main"></om-hover-button>
	</om-page>
</template>

<script>
	export default {
		provide(){
			return {
				info:this,
				showAll:this.showAll
			}
		},
		data() {
			return {
				id:"",
				cacheKey: "",
				datas: [],
				pageTitle: "",
				confirmBtn:[
					{
						text:"确认",
						bgcolor:"#5697F4"
					}
				],
				buttons: [],
				showAll: false,
				isSign: false,
				hasConfirmed:false,//是否刚点击了确认过，当点击确认按钮且保存成功后，设为true
				storageKey: "signature-key",
				image: "",
				imgHeight: '',
				imgWidth: '',
				isSmall: false,
				tips:"",
				isComfir: false,
				isShow: false,//初始进入本页，是否需要签名，true表示需要，false，不需要
				salaryBillYear: 0,
				salaryBillMonth: 0
			}
		},
		onLoad(options) {
			this.pageTitle = options.title || "详细信息"
			uni.setNavigationBarTitle({
				title: this.pageTitle
			})
			let _that = this
			if (options.cacheKey) {
				_that.cacheKey = options.cacheKey
				uni.getStorage({
					key: options.cacheKey,
					success: function(res) {
						if (res.data) {
							_that.datas = res.data
						}
					},
					fail() {
						console.error("获取失败")
					}
				})
			} else {
				let durl = options.durl;
				if (durl) {
					let _that = this;
					_that.om.request(durl).then(res => {
						_that.datas = d.value;
					})
				}
			}
			if (options.buttons) {
				this.buttons = JSON.parse(options.buttons)
			}
			if (options.id) {
				this.id = options.id
			}else{
				uni.navigateBack()
			}
			this.salaryBillYear = options.salaryBillYear
			this.salaryBillMonth = options.salaryBillMonth
			// this.om.request(
			// 	"salaryBill/getMainPosTip"
			// ).then(res=>{
			// 	if(res.succeed){
			// 		this.tips = res.value
			// 	}
			// })
		},
		onUnload() {
			uni.removeStorage({
				key: this.cacheKey
			})
		},
		onShow() {
			if(this.isSign){
				this.showImage()
			}
			this.om.request(
				"salaryBill/canConfirmById",
				{id: this.id}
			).then(res => {
				if (res.succeed) {
					this.isShow = res.value
				}
			})
		},
		methods: {
			imageView(url){
				uni.setStorage({
					key:"image-cache",
					data:url
				})
				uni.navigateTo({
					url:'../../public/img-view/img-view'
				})
			},
			changeImage(){
				let _that = this
				_that.$nextTick(function(){
					let signImage = uni.createSelectorQuery().select("#showSign")
					signImage.boundingClientRect((data) => {
						if (!_that.isSmall) {
							_that.imgHeight = (data.height) / 3
							_that.imgWidth = (data.width) / 3
							_that.isSmall = !_that.isSmall
						}
					}).exec()
				})
			}, 
			showImage() {
				let _that = this
				try {
					const value = uni.getStorageSync(_that.storageKey);
					if (value) {
						_that.image = value
						_that.$nextTick(() => {
							let signImage = uni.createSelectorQuery().select("#signImage")
							signImage.boundingClientRect((data) => {
								if (!_that.isSmall) {
									_that.imgHeight = (data.height) / 3
									_that.imgWidth = (data.width) / 3
									_that.isSmall = !_that.isSmall
								}
							}).exec()
						})
						uni.removeStorageSync(_that.storageKey)
					}
				} catch (e) {
					// error
				}
			},
			btnClick() {
				let _that = this
				if (!_that.image) {
					uni.navigateTo({
						url: "../../public/signature/signature"
					})
					return
				}
				_that.om.request(
					"salaryBill/doSalaryConfirm", 
					{
						signature: _that.image,
						id: _that.id
					},
					"post"
				).then(res => {
					if(!res.succeed){
						_that.om.toast(res.msg, 3000)
					}else{
						_that.om.toast("确认成功")
						_that.isShow = false
						_that.hasConfirmed = true
						_that.tips = ''
						_that.isComfir = true
					}
				})
			},
			toSignature() {
				if(!this.hasConfirmed){
					uni.navigateTo({
						url: "../../public/signature/signature"
					})
				}
			},
			hasItemVal(item) {
				if (!this.showAll) {
					if (item.value) {
						return true
					} else {
						return false
					}
				} else {
					return true
				}
			},
			hasFormula(item) {
				return item.attr && item.attr.autoFlag;
			},
			lookFormula(){
				
			},
			onTab(item) {
				if (item.h5Path) {
					if (item.attr && item.attr.infoShow) {
						uni.setStorage({
							key: 'cacheAttr',
							data: item.attr.infoShow
						})
					}
					uni.navigateTo({
						url: item.h5Path + "?cacheKey=cacheAttr"
					})
				}
			},
			btnChange(index) {
				var button = this.buttons[index]
				if (button.link) {
					uni.navigateTo({
						url: button.link
					})
				}
			}
		}
	}
</script>

<style>

</style>
